<template>
  <div class="category-list-container">
    <!-- 页面标题和操作栏 -->
    <div class="page-header">
      <h2 class="page-title">京剧行当管理</h2>
      <div class="page-actions">
        <el-button type="primary" icon="el-icon-plus" @click="handleAddCategory">添加行当</el-button>
        <el-input
          placeholder="搜索行当名称"
          v-model="searchQuery"
          class="search-input"
          prefix-icon="el-icon-search"
          clearable
          @clear="handleClearSearch"
          @keyup.enter.native="handleSearch"
        >
          <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
        </el-input>
      </div>
    </div>

    <!-- 行当列表表格 -->
    <el-card shadow="hover" class="table-card">
      <el-table
        :data="categoryList"
        border
        stripe
        style="width: 100%"
        v-loading="loading"
        class="category-table"
        :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }"
      >
        <el-table-column prop="categoriesId" label="ID" width="200" align="center"></el-table-column>
        <el-table-column prop="categoriesName" label="行当名称" width="120" align="center">
          <template slot-scope="scope">
            {{ scope.row.categoriesName }}
          </template>
        </el-table-column>
        <el-table-column prop="type" label="行当类别" width="120" align="center"></el-table-column>
        <el-table-column prop="description" label="行当描述" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createYear" label="成立时间" width="120" align="center"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160" align="center"></el-table-column>
        <el-table-column prop="createUser" label="创建人" width="100" align="center"></el-table-column>
        <el-table-column label="操作" width="180" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click.stop="handleEditCategory(scope.row)"></el-button>
            <el-button type="info" size="mini" icon="el-icon-view" @click.stop="handleViewCategory(scope.row)"></el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click.stop="handleDeleteCategory(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 没有数据时显示 -->
      <el-empty v-if="categoryList.length === 0 && !loading" description="暂无行当数据"></el-empty>

      <!-- 分页控件 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          background
        ></el-pagination>
      </div>
    </el-card>

    <!-- 添加/编辑行当对话框 -->
    <el-dialog 
      :title="dialogTitle" 
      :visible.sync="dialogVisible" 
      width="50%" 
      :close-on-click-modal="false"
      :before-close="handleDialogClose"
    >
      <el-form 
        :model="categoryForm" 
        :rules="categoryRules" 
        ref="categoryForm" 
        label-width="100px"
        class="category-form"
      >
        <el-form-item label="行当名称" prop="categoriesName">
          <el-input v-model="categoryForm.categoriesName" placeholder="请输入行当名称" maxlength="20" show-word-limit></el-input>
        </el-form-item>
        
        <el-form-item label="行当描述" prop="description">
          <el-input 
            type="textarea" 
            v-model="categoryForm.description" 
            placeholder="请输入行当描述"
            :rows="4"
            maxlength="500"
            show-word-limit
          ></el-input>
        </el-form-item>
        
        <el-form-item label="成立时间" prop="createYear">
          <el-select v-model="categoryForm.createYear" placeholder="请选择成立世纪/年代">
            <el-option-group label="清朝时期">
              <el-option label="17世纪中期(1644-1650年代)" value="17世纪中期"></el-option>
              <el-option label="17世纪晚期(1660-1690年代)" value="17世纪晚期"></el-option>
              <el-option label="18世纪早期(1700-1730年代)" value="18世纪早期"></el-option>
              <el-option label="18世纪中期(1740-1770年代)" value="18世纪中期"></el-option>
              <el-option label="18世纪晚期(1780-1790年代)" value="18世纪晚期"></el-option>
              <el-option label="19世纪早期(1800-1830年代)" value="19世纪早期"></el-option>
              <el-option label="19世纪中期(1840-1870年代)" value="19世纪中期"></el-option>
              <el-option label="19世纪晚期(1880-1900年代)" value="19世纪晚期"></el-option>
            </el-option-group>
            <el-option-group label="民国时期">
              <el-option label="20世纪早期(1910年代)" value="20世纪10年代"></el-option>
              <el-option label="20世纪20年代" value="20世纪20年代"></el-option>
              <el-option label="20世纪30年代" value="20世纪30年代"></el-option>
              <el-option label="20世纪40年代" value="20世纪40年代"></el-option>
            </el-option-group>
            <el-option-group label="新中国成立后">
              <el-option label="20世纪50年代" value="20世纪50年代"></el-option>
              <el-option label="20世纪60年代" value="20世纪60年代"></el-option>
              <el-option label="20世纪70年代" value="20世纪70年代"></el-option>
              <el-option label="20世纪80年代" value="20世纪80年代"></el-option>
              <el-option label="20世纪90年代" value="20世纪90年代"></el-option>
              <el-option label="21世纪00年代" value="21世纪00年代"></el-option>
              <el-option label="21世纪10年代" value="21世纪10年代"></el-option>
              <el-option label="21世纪20年代" value="21世纪20年代"></el-option>
            </el-option-group>
          </el-select>
        </el-form-item>
        
        <el-form-item label="行当类别" prop="type">
          <el-select v-model="categoryForm.type" placeholder="请选择行当类别">
            <el-option label="生" value="生"></el-option>
            <el-option label="旦" value="旦"></el-option>
            <el-option label="净" value="净"></el-option>
            <el-option label="丑" value="丑"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitCategoryForm" :loading="submitLoading">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 行当详情对话框 -->
    <el-dialog 
      title="行当详情" 
      :visible.sync="detailsVisible" 
      width="60%" 
      class="category-details-dialog"
    >
      <div v-if="currentCategory" class="category-details">
        <div class="category-header">
          <div class="category-basic-info">
            <h2 class="category-name">{{ currentCategory.categoriesName }}</h2>
            <div class="category-meta">
              <span><i class="el-icon-time"></i> 成立时间: {{ currentCategory.createYear }}</span>
              <span><i class="el-icon-user"></i> 创建人: {{ currentCategory.createUser }}</span>
              <span><i class="el-icon-date"></i> 创建时间: {{ currentCategory.createTime }}</span>
            </div>
          </div>
        </div>

        <el-divider content-position="left">行当介绍</el-divider>
        <p class="category-description">{{ currentCategory.description || '暂无介绍' }}</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import service from '@/utils/request'

export default {
  name: 'CategoryList',
  data() {
    return {
      // 行当列表数据
      categoryList: [],
      loading: false,
      searchQuery: '',
      
      // 分页配置
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      
      // 对话框配置
      dialogVisible: false,
      dialogTitle: '',
      detailsVisible: false,
      submitLoading: false,
      
      // 当前选中的行当
      currentCategory: null,
      
      // 表单数据
      categoryForm: {
        categoriesId: '',
        categoriesName: '',
        description: '',
        createYear: '',
        type: '',
        token: localStorage.getItem('token')
      },
      
      // 表单验证规则
      categoryRules: {
        categoriesName: [
          { required: true, message: '请输入行当名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入行当描述', trigger: 'blur' },
          { max: 500, message: '描述不能超过500个字符', trigger: 'blur' }
        ],
        createYear: [
          { required: true, message: '请选择成立时间', trigger: 'change' }
        ],
        type: [
          { required: true, message: '请选择行当类别', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.fetchCategoryList();
  },
  methods: {
    // 获取行当列表
    fetchCategoryList() {
      this.loading = true;
      service.get('/api/content/category/getCategoryList', {
        params: {
          pageNum: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          categoriesName: this.searchQuery
        }
      }).then(res => {
        if (res.code === 200) {
          this.categoryList = res.data.list;
          this.pagination.total = res.data.total;
        }
        this.loading = false;
      }).catch(error => {
        console.error('获取行当列表失败:', error);
        this.loading = false;
        this.$message.error('获取行当列表失败');
      });
    },
    
    // 处理搜索
    handleSearch() {
      this.pagination.currentPage = 1;
      this.fetchCategoryList();
    },
    
    // 清空搜索
    handleClearSearch() {
      this.searchQuery = '';
      this.fetchCategoryList();
    },
    
    // 添加行当
    handleAddCategory() {
      this.dialogTitle = '添加行当';
      this.resetForm();
      this.dialogVisible = true;
    },
    
    // 编辑行当
    handleEditCategory(row) {
      this.dialogTitle = '编辑行当';
      this.categoryForm = JSON.parse(JSON.stringify(row)); // 深拷贝
      this.categoryForm.token = localStorage.getItem('token');
      this.dialogVisible = true;
    },
    
    // 查看行当详情
    handleViewCategory(row) {
      this.currentCategory = row;
      this.detailsVisible = true;
    },
    
    // 删除行当
    handleDeleteCategory(row) {
      this.$confirm('确认删除该行当信息吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        service.delete(`/api/content/category/deleteCategory/${row.categoriesId}`).then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功');
            this.fetchCategoryList();
          }
        }).catch(error => {
          console.error('删除行当失败:', error);
          this.$message.error('删除行当失败');
        });
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    
    // 重置表单
    resetForm() {
      if (this.$refs.categoryForm) {
        this.$refs.categoryForm.resetFields();
      }
      this.categoryForm = {
        categoriesId: '',
        categoriesName: '',
        description: '',
        createYear: '',
        type: '',
        token: localStorage.getItem('token')
      };
    },
    
    // 提交表单
    submitCategoryForm() {
      this.$refs.categoryForm.validate(valid => {
        if (valid) {
          this.submitLoading = true;
          
          // 判断是新增还是编辑
          const isUpdate = !!this.categoryForm.categoriesId;
          
          const request = isUpdate
            ? service.put('/api/content/category/updateCategory', this.categoryForm)
            : service.post('/api/content/category/addCategory', this.categoryForm);
            
          request.then(res => {
            if (res.code === 200) {
              this.$message.success(isUpdate ? '更新成功' : '添加成功');
              this.dialogVisible = false;
              this.fetchCategoryList();
            }
            this.submitLoading = false;
          }).catch(error => {
            console.error(isUpdate ? '更新行当失败:' : '添加行当失败:', error);
            this.submitLoading = false;
            this.$message.error(isUpdate ? '更新行当失败' : '添加行当失败');
          });
        }
      });
    },
    
    // 分页相关方法
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.fetchCategoryList();
    },
    
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
      this.fetchCategoryList();
    },
    
    // 对话框关闭前的处理
    handleDialogClose(done) {
      this.resetForm();
      done();
    }
  }
}
</script>

<style scoped>
.category-list-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  font-size: 22px;
  color: #333;
  margin: 0;
  position: relative;
  padding-left: 15px;
}

.page-title:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background: #8B0000;
  border-radius: 2px;
}

.page-actions {
  display: flex;
  gap: 10px;
}

.search-input {
  width: 250px;
}

.table-card {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

/* 详情对话框样式 */
.category-details {
  padding: 10px;
}

.category-details-dialog /deep/ .el-dialog__header {
  background-color: #f5f7fa;
  padding: 15px 20px;
  border-bottom: 1px solid #e6e6e6;
}

.category-details-dialog /deep/ .el-dialog__title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.category-details-dialog /deep/ .el-dialog__body {
  padding: 20px;
}

.category-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.category-name {
  font-size: 20px;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
}

.category-meta {
  font-size: 14px;
  color: #606266;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.category-meta span {
  display: inline-flex;
  align-items: center;
  background-color: #f8f8f8;
  padding: 4px 8px;
  border-radius: 4px;
}

.category-meta span i {
  margin-right: 5px;
  color: #409EFF;
}

.category-description {
  line-height: 1.8;
  text-align: justify;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;
  border-left: 4px solid #409EFF;
}

/* 表单样式优化 */
.category-form .el-form-item {
  margin-bottom: 22px;
}

.category-form .el-select {
  width: 100%;
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .page-actions {
    margin-top: 10px;
    width: 100%;
    flex-wrap: wrap;
  }
  
  .search-input {
    width: 100%;
    margin-top: 10px;
  }
}
</style> 